<template>
  <div class="coupon-container">
    <van-nav-bar title="领券中心" left-arrow fixed @click-left="$router.back()" />
    <div class="list">
        <CouponItem v-for="item in list" :key="item.coupon_id" :item="item" :class="{blue:!item.is_receive,gray:item.is_receive}">
            <span v-if="item.is_receive" class="received">{{item.state.text}}</span>
            <span v-else class="receive-btn" @click="receiveCoupon(item.coupon_id)">立即领取</span>
        </CouponItem>
    </div>

  </div>
</template>

<script>

import { getCouponList, receiveMyCoupon } from '@/api/coupon'
import CouponItem from '@/components/CouponItem.vue'

export default {
  data () {
    return {
      list: [],
      n: 1
    }
  },
  components: {
    CouponItem
  },
  async created () {
    const { data: { list } } = await getCouponList()
    this.list = list
  },
  methods: {
    async receiveCoupon (couponId) {
      await receiveMyCoupon({ couponId })
      const { data: { list } } = await getCouponList()
      this.list = list
    }
  }
}
</script>

<style lang="less" scoped>

.coupon-container {
 padding-top: 46px;
}

.van-nav-bar {
    ::v-deep .van-nav-bar__title {
    font-weight: bold;
  }

    ::v-deep .van-icon-arrow-left {
        color: black;
    }
}

.header {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
    background-color: white;

    span {
      padding: 5px;
      font-size: 15px;
      color: rgb(48, 49, 51);
    }

    .activated {
      font-weight: bold;
      color: rgb(250, 34, 9);
      border-bottom: 3px solid rgb(250, 34, 9);
    }
  }

.list {
    background-color: white;
}

.blue {
    background: linear-gradient(-125deg, #57bdbf, #2f9de2);
}

.gray {
    background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
}

.received {
    margin-right: 10px;
}

.receive-btn {
    margin-right: 10px;
    border: 1px solid white;
    border-radius: 20px;
    padding: 3px 5px;
}
</style>
